#include("common.html")
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>商城</title>
    <meta name="description" content="商城">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="#(tpath)/static/css/element.css">
    <link rel="stylesheet" type="text/css" href="#(tpath)/static/css/basic.css">
    <link rel="stylesheet" type="text/css" href="#(tpath)/static/css/filter.css">
        <script src="#(tpath)/static/js/jquery.js"></script>
    <script src="#(tpath)/static/js/common.js"></script>
  </head>
  
  <body class="">
	#include("header.html")
    <style type="text/css">.cart-main { background: #fff; } .cart-main .cart-thead { display: inline-block; display: block; height: 32px; line-height: 32px; padding: 5px 0; background: #fff; border: 1px solid #e9e9e9; font-size: 14px; } .cart-main .cart-thead .t-goods { width: 50%; padding-left: 1%; } .cart-main .cart-thead .column { float: left; } .cart-main .cart-thead .t-price{ width: 15%; text-align: center; } .cart-main .cart-thead .t-quantity { width: 10%; text-align: center; } .cart-main .cart-thead .t-sum { width: 10%; text-align: center; } .cart-main .cart-thead .t-action { width: 10%; text-align: center; } .cart-item-list { margin-top: 10px; } .item-list { border: #aaa #f1f1f1 #f1f1f1; background: #fff; border: 1px solid #e9e9e9; } .cart-tbody{margin-bottom:20px} .cart-tbody .item-item { padding-left: 1%; } .cart-tbody .item-item { position: relative; line-height: 20px; background: #fff; } .cart-tbody .item-item .item-form { display: inline-block; display: block; font-size: 14px; } .cart-tbody .item-item .p-goods { width: 50%; padding: 10px 0px; } .cart-tbody .item-item .goods-item { display: inline-block; display: block; } .cart-tbody .item-item .goods-item .p-img { float: left; width: 80px; height: 80px; border: 1px solid #eee; margin-right: 10px; background: #fff; padding: 0; text-align: center; overflow: hidden; line-height: 80px; } .cart-tbody .item-item .goods-item .p-img img { width: 65px; height: 65px; } .cart-tbody .item-item .goods-item .p-name { /*height: 40px; line-height: 40px;*/ overflow: hidden; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; } .cart-tbody .item-item .goods-item .p-name a { color: #333; } .cart-tbody .item-item .p-price { width: 15%; line-height: 100px; } .cart-tbody .item-item .p-price { font-family: verdana; text-align: center; } .cart-tbody .item-item .cell { float: left; } .cart-tbody .item-item .p-quantity { width: 11%; text-align: center; margin-top: 25px; } .p-quantity .change-goods-num { width: 98px; height: 28px; margin: 0 auto; border: 1px solid #dfdfdf; } .p-quantity .change-goods-num a { display: inline-block; float: left; width: 28px; height: 28px; line-height: 28px; color: #6d6d6d; background: #fafafa; } .p-quantity .change-goods-num a .ic-jia { background: url(/static/pc/imgs/ic-jia.png) no-repeat 0px; width: 28px; height: 28px; display: block; } .cl{ clear: both; } .p-quantity .change-goods-num .goods-num { float: left; width: 40px; height: 28px; line-height: 28px; padding: 0; border: none; border-left: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf; text-align: center; color: #333; } .p-quantity .change-goods-num a .ic-jian { background: url(/static/pc/imgs/ic-jian.png) no-repeat 0px; width: 28px; height: 28px; display: block; } .el-input-number{ width: 130px; } .ac { text-align: center; } .ftx-03, .ftx03, .gray, .grey { color: #aaa; } .cart-tbody .item-item .p-weight { width: 10%; text-align: center; line-height: 100px; } .cart-tbody .item-item .p-sum { width: 10%; text-align: center; } .cart-tbody .item-item .p-sum strong { color: #333; font-weight: 700; } strong { font-weight: bold; } .cart-tbody .item-item .p-ops { width: 10%; text-align: center; line-height: 100px; } .cart-tbody .item-item .p-ops a { color: #666; display: block; } .cart-tbody .item-item .p-ops a { color: #666; display: block; } .cart-toolbar { height: 50px; border: 1px solid #f0f0f0; background: #fff; position: relative; margin-top: 15px; } .toolbar-wrap { position: relative; margin: 0 auto; font-size: 14px; } .toolbar-wrap .selected-item-list { position: absolute; z-index: 10; top: -122px; left: 0; height: 122px; } .toolbar-wrap .options-box { position: relative; height: 50px; } .btncart { float: left; height: 18px; line-height: 18px; padding: 16px 0 16px 15px; white-space: nowrap; } .fl{ float: left; } .toolbar-wrap .toolbar-right { position: absolute; height: 52px; right: 0; top: -1px; width: 710px; } .toolbar-wrap .toolbar-right .combine { display: none; } .toolbar-wrap .toolbar-right .combine { display: none; } .toolbar-wrap .toolbar-right .combine .comm-right { float: right; width: 740px; } .toolbar-wrap .btn-area { float: right; } .toolbar-wrap .btn-area .common-submit-btn { width: 136px; float: left; margin-left: 10px; _display: inline; } .toolbar-wrap .btn-area .common-submit-btn, .toolbar-wrap .btn-area .jdInt-submit-btn, .toolbar-wrap .btn-area .submit-btn { display: block; position: relative; width: 96px; height: 52px; line-height: 52px; color: #fff; text-align: center; font-size: 18px; font-family: '\5fae\8f6f\96c5\9ed1'; background: #e58277; overflow: hidden; } .common-submit-unbtn{ display: block; position: relative; width: 96px; height: 52px; line-height: 52px; color: #fff; text-align: center; font-size: 18px; font-family: '\5fae\8f6f\96c5\9ed1'; background: #ffa1a1; overflow: hidden; float: left; margin-left: 10px; } .toolbar-wrap .btn-area .common-submit-btn b { width: 136px; background-position: 0 -124px; } .toolbar-wrap .price-sum { float: right; height: 43px; line-height: 55px; margin-left: 10px; color: #666; width: auto; } .toolbar-wrap .price-sum div { white-space: nowrap; } .toolbar-wrap .price-sum .txt { float: left; width: 130px; text-align: right; color: #999; } .toolbar-wrap .price-sum .price { display: inline-block; text-align: right; font-family: verdana; } .toolbar-wrap .amount-sum { float: right; color: #999; height: 100%; line-height: 55px; cursor: pointer; } .toolbar-wrap .amount-sum em { color: #e58277; font-family: verdana; font-weight: 700; margin: 0 3px; } .toolbar-wrap .amount-sum b.up { background-position: -45px -91px; } .toolbar-wrap .amount-sum b { display: inline-block; width: 9px; height: 5px; background: url(/static/pc/imgs/cart-icons-new.png) -45px -91px; overflow: hidden; vertical-align: middle; margin: -5px 0 0 5px; -webkit-transition: all .2s ease-in 0s; -moz-transition: all .2s ease-in 0s; transition: all .2s ease-in 0s; } .unselect_img{ width: 18px; height: 18px; vertical-align: middle; } .selected_img{ width: 15px; height: 15px; vertical-align: middle; } .unselect-goods-icon{ float: left; margin-top: 35px; margin-right: 20px; width: 18px; height: 18px; vertical-align: middle; } .selected-goods-icon{ float: left; margin-top: 35px; margin-right: 20px; width: 15px; height: 15px; vertical-align: middle; } .all-select{ padding: 10px 10px; border: 1px solid #e9e9e9; border-bottom: 0; font-size: 14px; } .num_hint{ margin-top: 5px; color: #f44; } .el-alert__title { font-size: 16px; line-height: 18px; font-weight: bold; } .el-alert--warning.is-light { background-color: #fdf6ec; color: red; } .miao_tag{ padding: 2px 5px; background-color:#f15151; color: #fff; border-radius: 4px; font-size: 12px; margin-right: 5px; }</style>
    <div>
      <div class="cart-main" style="background: rgb(255, 255, 255);">
        <br>
        <div class="allwarp">
          <div class="cart-thead">
            <div class="column t-goods">商品</div>
            <div class="column t-price">单价(￥)</div>
            <div class="column t-quantity">数量</div>
            <div class="column t-action">操作</div>
            <div class="cl"></div>
          </div>
          <div id="cart">
            <div class="cart-item-list">
            
              #if(currentCart.cartItems?? && currentCart.cartItems.size()>0)
              <div class="cart-tbody">
                <div class="all-select">
                  #if(currentCart.isSelect)
                  <img src="#(base)/static/images/selected.svg" class="selected_img typeCheck">全选
                  #else 
                  <img src="#(base)/static/images/circle.svg" class="unselect_img typeCheck">全选
                  #end
                </div>
                <div class="item-list" style="z-index: auto;">
                  <div class="item-single item-item" style="z-index: auto;">
                  
                  	#for(cartItem : currentCart.cartItems)
                    <div class="item-form">
                      <div class="cell p-goods">
                        <div class="goods-item">
                          <input type="hidden" name="price" value="#(cartItem.price)"/>
                		  <input type="hidden" name="cartItemId" value="#(cartItem.id)"/>
                          #if(cartItem.isSelect && cartItem.quantity>0)
                          <img src="#(base)/static/images/selected.svg" class="selected-goods-icon itemCheck" quantity="#(cartItem.quantity)">
                          #else
                          <img src="#(base)/static/images/circle.svg" class="unselect-goods-icon itemCheck" quantity="#(cartItem.quantity)">
                          #end
                          <div class="p-img">
                            <a>
                              <img src="#(imageUrl(cartItem.product.image))"></a>
                          </div>
                          <div class="p-name">
                            <a>
                              <!---->#(cartItem.product.name)</a>
                            <!----></div>
                          <!----></div>
                      </div>
                      <div class="cell p-price">
                        <span>#(cartItem.price)</span></div>
                      <div class="cell p-quantity">
                        <div class="el-input-number" productId="#(cartItem.productId)">
                          <span role="button" class="el-input-number__decrease #if(cartItem.quantity<=1)is-disabled#end">
                            <i class="el-icon-minus" style="line-height: 38px;"></i>
                          </span>
                          <span role="button" class="el-input-number__increase #if(cartItem.quantity>=cartItem.product.stock)is-disabled#end">
                            <i class="el-icon-plus" style="line-height: 38px;"></i>
                          </span>
                          <div class="el-input">
                            <!---->
                            <input type="text" autocomplete="off" class="el-input__inner quantity" name="quantity" value="#(cartItem.quantity)" stock="#(cartItem.product.stock)">
                            <!---->
                            <!---->
                            <!---->
                            <!----></div>
                        </div>
                        <!----></div>
                      <div class="cell p-ops">
                        <a class="cart-remove ic-del deleteCartItem" cartItemId="#(cartItem.id)" >删除</a></div>
                      <div class="cl"></div>
                    </div>
                    #end
                    
                  </div>
                </div>
              </div>
              #end
              
              <div class="cl"></div>
              <div class="ui-ceilinglamp-1" style="height: 52px;">
                <div class="cart-toolbar" style="height: 50px;">
                  <div class="toolbar-wrap">
                    <div class="selected-item-list hide"></div>
                    <div class="options-box">
                      <a class="btncart fl" id="clearCart">清空购物车</a>
                      <a href="#(base)/product/list" class="btncart fl">继续购物</a>
                      <div class="cl"></div>
                      <div class="toolbar-right">
                        <div class="combine" style="display: block;">
                          <div class="comm-right">
                            <div class="btn-area">
                              <a  style="background: #f15151;" class="common-submit-btn" #if(currentCart.cartItems?? && currentCart.cartItems.size()>0) onclick="addOrder()" #end>去结算</a>
                              <b>
                              </b>
                            </div>
                            <div class="price-sum">
                              <div>
                                <span class="txt">价格：</span>
                                <span class="price sumPrice">
                                  <em id="fee_pay">￥<span id="totalPrice">#(currentCart.totalPrice)</span></em></span>
                                <br></div>
                            </div>
                            <div class="amount-sum">"已选择"
                              <em id="totalQuantity">#(currentCart.totalQuantity)</em>"件商品"</div>
                            <div class="cl"></div>
                          </div>
                          <div class="cl"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <br>
              <br></div>
          </div>
          <div class="cl"></div>
        </div>
        <div class="cl"></div>
      </div>
    </div>
   #include("footer.html")
  </body>

</html>
<script type="text/javascript">

$(".typeCheck").on("click",function(){
	if($(this).hasClass("selected_img")){
		$(this).addClass("unselect_img");
		$(this).removeClass("selected_img");
		$(this).attr("src","#(base)/static/images/circle.svg");
		var items = $(this).closest(".cart-tbody").find(".itemCheck");
		$.each(items,function(index,item){
			$(item).removeClass("selected-goods-icon");
			$(item).addClass("unselect-goods-icon");
			$(item).attr("src","#(base)/static/images/circle.svg");
		});
	}else{
		$(this).addClass("selected_img");
		$(this).removeClass("unselect_img");
		$(this).attr("src","#(base)/static/images/selected.svg");
		var items = $(this).closest(".cart-tbody").find(".itemCheck");
		$.each(items,function(index,item){
			var quantity = parseInt($(item).attr("quantity"));
			if(quantity>0){
				$(item).addClass("selected-goods-icon");
				$(item).removeClass("unselect-goods-icon");
				$(item).attr("src","#(base)/static/images/selected.svg");
			}
		});
	}
	choose();
});

$(".itemCheck").on("click",function(){
	if($(this).hasClass("selected-goods-icon")){
		$(this).removeClass("selected-goods-icon");
		$(this).addClass("unselect-goods-icon");
		$(this).attr("src","#(base)/static/images/circle.svg");
		if($(this).closest(".cart-tbody").find(".itemCheck.selected-goods-icon").length==0){
			var typeCheck = $(this).closest(".cart-tbody").find(".typeCheck");
			if(typeCheck.hasClass("selected_img")){
				typeCheck.removeClass("selected_img");
				typeCheck.addClass("unselect_img");
				typeCheck.attr("src","#(base)/static/images/circle.svg");
			}
		}
	}else{
		var quantity = parseInt($(this).attr("quantity"));
		if(quantity<1){
			alert("库存不足,不能购买")
			return;
		}
		$(this).addClass("selected-goods-icon");
		$(this).removeClass("unselect-goods-icon");
		$(this).attr("src","#(base)/static/images/selected.svg");
		var typeCheck = $(this).closest(".cart-tbody").find(".typeCheck");
		if(!typeCheck.hasClass("selected_img")){
			typeCheck.addClass("selected_img");
			typeCheck.removeClass("unselect_img");
			typeCheck.attr("src","#(base)/static/images/selected.svg");
		}
	}
	choose();
});


function toDecimal2(x) {  
    var f = parseFloat(x);  
    if (isNaN(f)) {  
        return false;  
    }  
    var f = Math.round(x*100)/100;  
    var s = f.toString();  
    var rs = s.indexOf('.');  
    if (rs < 0) {  
        rs = s.length;  
        s += '.';  
    }  
    while (s.length <= rs + 2) {  
        s += '0';  
    }  
    return s;  
}  

$(".el-input-number__decrease").on("click",function(){
	var number = parseInt($(this).parent().find(".quantity").val());
	if(number<=1){
		return;
	}
	number--;
	$(this).parent().find(".quantity").val(number);
	if(number<=1){
		$(this).addClass("is-disabled");
	}
	$(this).parent().find(".el-input-number__increase").removeClass("is-disabled");
	var productId = $(this).parent().attr("productId");
	updateQuantity(productId,number);
});

$(".el-input-number__increase").on("click",function(){
	var number = parseInt($(this).parent().find(".quantity").val());
	var stock = parseInt($(this).parent().find(".quantity").attr("stock"));
	if(number>=stock){
		alert("库存不足");
		return;
	}
	number++;
	$(this).parent().find(".quantity").val(number);
	$(this).parent().find(".el-input-number__decrease").removeClass("is-disabled");
	if(number>=stock){
		$(this).parent().find(".el-input-number__increase").addClass("is-disabled");
	}
	
	var productId = $(this).parent().attr("productId");
	updateQuantity(productId,number);
});


//更新购物车数量
function updateQuantity(productId,quantity){
	$.ajax({
        url: "#(base)/cart_item/update",
        type: "post",
        data: {"productId":productId,"quantity":quantity,"type":1},
        dataType: "json",
        success: function(res){
        	var quantity = res.quantity;
        	$("#totalQuantity").html(res.data.totalQuantity);
        	$("#totalPrice").html(toDecimal2(res.data.totalPrice));
        },
        error: function(res){
        }
    });
}

$(".deleteCartItem").on("click",function(){
	var cartItemId = $(this).attr("cartItemId");
	deleteCartItem(cartItemId);
});

$("#clearCart").on("click",function(){
	
	$.ajax({
        url: "#(base)/cart_item/deleteAll",
        type: "post",
        data: {},
        dataType: "json",
        success: function(res){
        	location.reload();
        },
        error: function(res){
        }
    });
});

function choose(){
	var items = $("#cart").find(".selected-goods-icon");
	var selectCartItemIds="";
	$.each(items,function(index,item){
		var cartItemId = $(item).closest(".item-form").find("input[name='cartItemId']").val();
		selectCartItemIds+=","+cartItemId;
	});
	if(selectCartItemIds!=""){
		selectCartItemIds = selectCartItemIds.substring(1);
	}
	$.ajax({
        url: "#(base)/cart_item/choose",
        type: "post",
        data: {"ids":selectCartItemIds},
        dataType: "json",
        success: function(res){
        	$("#totalQuantity").html(res.data.totalQuantity);
        	$("#totalPrice").html(toDecimal2(res.data.totalPrice));
        },
        error: function(res){
        }
    });
}

function addOrder(){
	var items = $("#cart").find(".selected-goods-icon");
	if(items.length<1){
		alert("请选择商品");
		return;
	}
	location.href="#(base)/order/add";
}

//删除购物项
function deleteCartItem(cartItemId){
	
	$.ajax({
        url: "#(base)/cart_item/delete",
        type: "post",
        data: {"id":cartItemId},
        dataType: "json",
        success: function(res){
        	location.reload();
        },
        error: function(res){
        }
    });
	
}


</script>